<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}

.avatar {
  width: 132px;
  height: 142px;
  display: block;
}

.el-dialog__title {
  font-family: 黑体;
  font-size: 25px;
}

.el-dialog__header {
  text-align: center;
}
.bodyDiv {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>

<template>
  <div class="bodyDiv">
    <el-card style="width: 1200px;height:auto;margin: -19px auto;">

      <h2 style="text-align: center;margin-top: 14px">USER/CENTER</h2>
      <h3 style="text-align: center">个人中心</h3>

      <!--  描述列表展示  -->
      <el-descriptions :contentStyle="{'text-align':'center'}" style="margin-top: 12px;" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{ userStandard.username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture"></i>
            头像
          </template>
          <el-avatar :size="38" shape="circle"
                     :src="userStandard.photo==null?'':require('../img/user/'+userStandard.photo)"/>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ userStandard.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            居住地址
          </template>
          {{ userStandard.address }}
          <el-tag v-show="userStandard.address==null?true:false" style="color:red" size="medium">待完善</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom"></i>
            姓名
          </template>
          {{ userStandard.name }}
          <el-tag v-show="userStandard.name==null?true:false" style="color:red" size="medium">待完善</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            年龄
          </template>
          {{ userStandard.age }}
          <el-tag v-show="userStandard.age==null?true:false" style="color:red" size="medium">待完善</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            性别
          </template>
          {{ userStandard.gender }}
          <el-tag v-show="userStandard.gender==null?true:false" style="color:red" size="medium">待完善</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-folder"></i>
            电子邮箱
          </template>
          {{ userStandard.email }}
          <el-tag v-show="userStandard.email==null?true:false" style="color:red" size="medium">待完善</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-unfold"></i>
            身份证号
          </template>
          {{ userStandard.identity }}
          <el-tag v-show="userStandard.identity==null?true:false" style="color:red" size="medium">待完善</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            是否近期返乡人员
          </template>
          <el-tag :type="userStandard.isReturnPeople == '0' ? 'success' : 'danger'">
          {{ userStandard.isReturnPeople == '0' ? '否' : '是' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item :contentStyle="{'text-align':'left'}">
          <template slot="label">
            <i class="el-icon-s-unfold"></i>
            注册时间
          </template>
          <span style="margin-left: 82px">
               {{ userStandard.gmtCreate }}
            </span>
        </el-descriptions-item>
      </el-descriptions>

      <el-button style="float: right;margin:12px 0" type="danger" @click="dialogFormVisible = true">完善个人信息</el-button>
      <el-button style="float: right;margin:12px 10px 12px" type="primary" @click="updatePass()">修改密码</el-button>
    </el-card>

    <!--  修改用户信息弹窗  -->
    <el-dialog title="完善个人信息" :visible.sync="dialogFormVisible">
      <el-form :model="userUpdateForm" :rules="rules" ref="userUpdateForm" label-width="100px"
               class="demo-userStandard">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="userUpdateForm.userName" placeholder="请输入用户名！"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="userUpdateForm.name" placeholder="请输入姓名！"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio v-model="userUpdateForm.gender" label="男">男</el-radio>
          <el-radio v-model="userUpdateForm.gender" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="userUpdateForm.age" placeholder="请输入年龄！"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="userUpdateForm.email" placeholder="请输入电子邮箱！"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/user/upload"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeAvatarUpload">
            <img width="130px" height="130px" v-if="this.userUpdateForm.photo"
                 :src="photoUrl!=''?photoUrl:require('../img/user/'+userStandard.photo)">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="手机号码" prop="userPhone">
          <el-input v-model="userUpdateForm.userPhone" placeholder="请输入手机号！"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="identity">
          <el-input v-model="userUpdateForm.identity" placeholder="请输入身份证号！"></el-input>
        </el-form-item>
        <el-form-item label="居住地址" prop="address">
          <el-input v-model="userUpdateForm.address" placeholder="请输入居住地址！"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('userUpdateForm')">提交</el-button>
        <el-button @click="resetForm('userUpdateForm')">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photoUrl:'',
      userStandard: {},
      userUpdateForm: {
        userName: '',
        userPhone: '',
        name: '',
        age: '',
        photo: '',
        email: '',
        gender: '',
        identity: '',
        address: '',
      },
      rules: {
        userName: [
          {required: true, message: '请输入2-10位中文、英文、数字但不包括下划线等符号的用户名！', trigger: 'blur'},
        ],
        userPhone: [
          {required: true, message: '手机号码格式不正确,请输入1-11位数字的手机号!', trigger: 'blur'},
        ],
        name: [
          {required: true, message: '请输入1-4位中文，英文的姓名！', trigger: 'blur'},
        ],
        age: [
          {required: true, message: '请输入1-99岁的年龄！', trigger: 'blur'},
        ],
        photo: [
          {required: true, message: '请输入2-10位中文、英文、数字但不包括下划线等符号的用户名！', trigger: 'blur'},
        ],
        email: [
          {required: true, message: '请输入正确的邮箱格式！', trigger: 'blur'},
        ],
        gender: [
          {required: true, message: '请选择男或者女性别！', trigger: 'blur'},
        ],
        identity: [
          {required: true, message: '请输入18位身份证号码！', trigger: 'blur'},
        ],
        address: [
          {required: true, message: '请填写正确的住址！例如x省x市x区x县x道x路x街x号', trigger: 'blur'},
        ],
      },
      dialogFormVisible: false,
      formLabelWidth: '120px'
    };
  },
  methods: {
    handleSuccess(response,file) {//图片上传成功后
      console.log(response);
      this.userUpdateForm.photo = response;
      this.photoUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    //修改用户信息
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = "http://localhost:8080/user/update";
          let formData = this.qs.stringify(this.userUpdateForm);
          console.log('完善信息数据是：' + formData);
          this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
              .post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.$notify.success({
                title: '提示',
                message: '完善个人信息成功!',
                showClose: true,
                position: 'top-right'
              });
              window.location.reload();
            } else {
              this.$notify.warning({
                title: '提示',
                message: responseBody.message,
                showClose: true,
                position: 'top-right'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    //跳转修改密码
    updatePass() {
      this.$router.push('/sys-user/updatePass');
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //加载用户信息
    loadUser() {
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .get("http://localhost:8080/user/currentUser").then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.userStandard = responseBody.data;
          this.userUpdateForm.userName = this.userStandard.username;
          this.userUpdateForm.userPhone = this.userStandard.phone;
          this.userUpdateForm.name = this.userStandard.name;
          this.userUpdateForm.age = this.userStandard.age;
          this.userUpdateForm.gender = this.userStandard.gender;
          this.userUpdateForm.photo = this.userStandard.photo;
          this.userUpdateForm.address = this.userStandard.address;
          this.userUpdateForm.identity = this.userStandard.identity;
          this.userUpdateForm.email = this.userStandard.email;
        } else if (responseBody.state == 40100) {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
          this.$router.push('/login');
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
        }
      });
    }
  },
  created() {
    this.loadUser();
  }
}
</script>